<template>
  <div class="analysis-container">
    <h3>预测误差分析</h3>
    <div class="content">
      <div class="metrics">
        <div class="metric">
          <strong>MAE:</strong> 4.35%
        </div>
        <div class="metric">
          <strong>RMSE:</strong> 5.78%
        </div>
      </div>

      <div class="section">
        <h4>预测误差分布</h4>
        <div class="distribution">
          <div class="item">
            <span class="label">优秀 (0-3%)</span>
            <span class="value">8 个客户</span>
          </div>
          <div class="item">
            <span class="label">良好 (3-5%)</span>
            <span class="value">12 个客户</span>
          </div>
          <div class="item">
            <span class="label">一般 (5-8%)</span>
            <span class="value">7 个客户</span>
          </div>
          <div class="item">
            <span class="label">较差 (>8%)</span>
            <span class="value">3 个客户</span>
          </div>
        </div>
      </div>

      <div class="section">
        <h4>预测模型对比</h4>
        <div class="model-comparison">
          <div class="model">
            <span class="model-name">移动平均法</span>
            <span class="model-accuracy">准确率: 94.5%</span>
          </div>
          <div class="model highlight">
            <span class="model-name">指数平滑法 (推荐)</span>
            <span class="model-accuracy">准确率: 95.2%</span>
          </div>
          <div class="model">
            <span class="model-name">线性趋势预测</span>
            <span class="model-accuracy">准确率: 92.8%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.analysis-container {
  background-color: #13142a;
  border-radius: 8px;
  border: 1px solid #2a2a57;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #e0e0ff;
}

h3 {
  margin: 0;
  padding: 15px 20px;
  font-size: 18px;
  border-bottom: 1px solid #2a2a57;
}

.content {
  padding: 15px 20px;
  overflow-y: auto;
  flex: 1;
}

.metrics {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.metric {
  background-color: rgba(58, 54, 219, 0.1);
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid rgba(58, 54, 219, 0.3);
}

.section {
  margin-bottom: 20px;
}

h4 {
  font-size: 16px;
  margin: 0 0 10px 0;
  color: #00c9ff;
}

.distribution, .model-comparison {
  background-color: rgba(42, 42, 87, 0.3);
  border-radius: 6px;
  padding: 15px;
}

.item, .model {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(42, 42, 87, 0.5);
}

.item:last-child, .model:last-child {
  border-bottom: none;
}

.highlight {
  background-color: rgba(0, 255, 179, 0.1);
  border-radius: 4px;
  padding: 8px;
  margin: 5px 0;
}

.model-name {
  font-weight: bold;
}
</style> 